<template>
  <div class="user-management">
    <div class="content">
      <div class="search">
        <el-form :model="form" inline>
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input placeholder="请输入昵称" v-model="form.nickName"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input placeholder="请输入邮箱" v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">搜索用户</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table">
        <el-table
          style="height: calc(100vh - 210px)"
          :data="tableData"
          :row-style="{ height: '60px' }"
        >
          <el-table-column width="60" label="序号" type="index" align="center"></el-table-column>
          <template v-for="item in tableColumn" :key="item.prop">
            <template v-if="!item.custom">
              <el-table-column
                :prop="item.prop"
                :label="item.label"
                :align="item.align"
                :fixed="item.fixed"
                :show-overflow-tooltip="item.showOverflowTooltip"
              ></el-table-column>
            </template>
            <template v-else>
              <el-table-column
                v-if="item.prop === 'createTime'"
                :label="item.label"
                :align="item.align"
                :fixed="item.fixed"
                :show-overflow-tooltip="item.showOverflowTooltip"
              >
                <template v-slot:default="scope">
                  <span>{{ new Date(scope.row.createTime).toLocaleString() }}</span>
                </template>
              </el-table-column>
              <el-table-column
                v-if="item.prop === 'role'"
                :label="item.label"
                :align="item.align"
                :fixed="item.fixed"
                :show-overflow-tooltip="item.showOverflowTooltip"
              >
                <template v-slot="scope">
                  {{ scope.row.roles.map((item) => item.name).join('、') }}
                </template>
              </el-table-column>
              <el-table-column
                v-if="item.prop === 'headPic'"
                :label="item.label"
                :align="item.align"
                :fixed="item.fixed"
                :show-overflow-tooltip="item.showOverflowTooltip"
              >
                <template v-slot:default="scope">
                  <div v-if="scope.row.headPic">
                    <img
                      :src="`http://localhost:3005/${scope.row.headPic}`"
                      alt="头像"
                      width="50"
                      height="50"
                    />
                  </div>
                  <span v-else>无</span>
                </template>
              </el-table-column>
              <el-table-column
                v-if="item.prop === 'operation'"
                :label="item.label"
                :align="item.align"
                :fixed="item.fixed"
                :show-overflow-tooltip="item.showOverflowTooltip"
              >
                <template v-slot="scope">
                  <el-button type="primary" size="small" @click="editPermission(scope.row)"
                    >编辑权限</el-button
                  >
                </template>
              </el-table-column>
            </template>
          </template>
        </el-table>
        <div v-if="tableData.length" class="pagination-w">
          <el-pagination
            :total="searchParams.total"
            background
            :locale="zhCn"
            :current-page="searchParams.current"
            :page-size="searchParams.pageSize"
            :page-sizes="searchParams.pageSizes"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
          ></el-pagination>
        </div>
      </div>
    </div>
    <RoleDialog ref="roleDialogRef" @submit="getUserListApi" />
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { getUserList } from '@/api/user'
import RoleDialog from './roleDialogView.vue'

const form = reactive({
  username: '',
  email: '',
  nickName: '',
})
const roleDialogRef = ref(null)
const tableColumn = ref([
  {
    prop: 'username',
    label: '用户名',
    align: 'center',
    showOverflowTooltip: true,
  },
  {
    prop: 'headPic',
    custom: true,
    label: '头像',
    align: 'center',
    showOverflowTooltip: true,
  },
  {
    prop: 'nickName',
    label: '昵称',
    align: 'center',
    showOverflowTooltip: true,
  },
  {
    prop: 'email',
    label: '邮箱',
    align: 'center',
    showOverflowTooltip: true,
  },
  {
    prop: 'phoneNumber',
    label: '手机号',
    align: 'center',
    showOverflowTooltip: true,
  },
  {
    prop: 'role',
    label: '角色',
    align: 'center',
    showOverflowTooltip: true,
    custom: true,
  },
  {
    prop: 'createTime',
    label: '注册时间',
    custom: true,
    align: 'center',
    showOverflowTooltip: true,
  },
  {
    prop: 'operation',
    label: '操作',
    align: 'center',
    fixed: 'right',
    showOverflowTooltip: true,
    custom: true,
  },
])
const tableData = ref([])
const searchParams = ref({
  current: 1,
  pageSize: 10,
  pageSizes: [10, 20, 50, 100, 200],
  total: 0,
})
const getUserListApi = async () => {
  const res = await getUserList(
    form.username,
    form.nickName,
    form.email,
    searchParams.value.current,
    searchParams.value.pageSize
  )
  if (res.status === 201 || res.status === 200) {
    tableData.value = res.data.data.users
    searchParams.value.total = parseInt(res.data.data.totalCount) || 0
  }
}
onMounted(() => {
  getUserListApi()
})

const editPermission = (row) => {
  roleDialogRef.value?.openDialog(row)
}
const handleSizeChange = (newSize) => {
  console.log('size change', newSize)
  searchParams.value.pageSize = newSize
  getUserListApi()
}

const handlePageChange = (newPage) => {
  console.log('page change', newPage)
  searchParams.value.current = newPage
  getUserListApi()
}

const onSearch = async () => {
  const res = await getUserList(
    form.username,
    form.nickName,
    form.email,
    searchParams.value.current,
    searchParams.value.pageSize
  )
  if (res.status === 201 || res.status === 200) {
    tableData.value = res.data.data.users
    searchParams.value.total = parseInt(res.data.data.totalCount) || 0
  }
}
</script>

<style lang="scss" scoped>
.user-management {
  .content {
    padding: 20px;
    .table {
      .pagination-w {
        display: flex;
        justify-content: right;
        margin-top: 20px;
      }
    }
  }
}
</style>
